<template>
  <div hoverable="false">
        <a-row type="flex" >
          <!-- 循环遍历results，分别创建卡片 -->
          <div v-for="result in this.dataSource" :key="result.id" class="card-father">
            <!-- <a-col> -->
              <a-card class="my-mapcard" :hoverable="true">
                <a href="#" @click="showmap(result.sourceType,result)">
                  <img slot="cover" alt="图片不见了。" :src="result.thumbnail" class="my-mapcard-img"/>
                </a>
                <template slot="actions" class="ant-card-actions">
                  <a href="#" @click="showmap(result.sourceType,result)"><a-icon type="play-circle" /></a>
                  <a-icon key="edit" type="edit"/>
                  <a-icon type="share-alt" />
                  <a-icon key="ellipsis" type="ellipsis"/>
                </template>
                <a-card-meta :title="result.name" class="my-card-body">
                  <div slot="description">{{ result.description }}
                    <div>{{ result.createTime }}</div>
                  </div>
                  <a-avatar
                    slot="avatar"
                    :src="result.thumbnail"
                  />
                  
                </a-card-meta>
              </a-card>
            <!-- </a-col> -->
          </div>
        </a-row>
        <div v-if="hasMore" class="addmore">
          <a-button style="padding:0 28px" @click="Addmore">加载更多 . . .</a-button>
        </div>
        <div v-else class="addmore">————我是有底线的————</div>
      </div>
</template>

<script>
import Axios from 'axios'
const dataSource = []
let tempMap=[]

export default {
    name:'mymapphoto',
    data(){
        return{
          dataSource,
          tempMap,
          pageNo:1,
          hasMore:true,
          text:'',
        }
    },
    props: [
      'ismanager'
    ],
    methods:{
      searchMyMap(text){
        this.text =text
        this.axios.get('/sys/resource/myList',
        {
          params:{
            keywords:text,
            sourceTypeInt:'3',
            pageNo:'1',
            pageSize:'10'
        } 
        }).then((res) => {
          this.tempMap =res.result.content
          this.dataSource =this.tempMap
          if((parseInt(res.result.totalPage) -parseInt(res.result.currentPage))>0){
              this.hasMore=true
            }else{
              this.hasMore=false
            }
        })

      },
      showmap(type,record){
        if(type =='地图服务'){
          let url2D = this.$router.resolve({path:'/Map/show2D',query: {id:record.id}});
          window.open(url2D.href,'blank')
        }else{
          let url3D = this.$router.resolve({path:'/Map/show3D',query: {url:record.url}});
          window.open(url3D.href,'blank')
        }
      },
      Addmore(){
        if(this.text){
          this.pageNo = parseInt(this.pageNo)+1
          this.axios.get('/sys/resource/myList',
          {
            params:{
              keywords:this.text,
              sourceTypeInt:'3',
              pageNo:this.pageNo,
              pageSize:'10'
          } 
          }).then((res) => {
            this.tempMap =res.result.content
            this.dataSource =this.dataSource.concat(this.tempMap)
            if((parseInt(res.result.totalPage) -parseInt(res.result.currentPage))>0){
              this.hasMore=true
            }else{
              this.hasMore=false
            }
          })
        }else{
          this.pageNo = parseInt(this.pageNo)+1
          this.axios.get('/sys/resource/myList',
          {
            params:{
              sourceTypeInt:'3',
              pageNo:this.pageNo,
              pageSize:'10'
          } 
          }).then((res) => {
            this.tempMap =res.result.content
            this.dataSource =this.dataSource.concat(this.tempMap)
            if((parseInt(res.result.totalPage) -parseInt(res.result.currentPage))>0){
              this.hasMore=true
            }else{
              this.hasMore=false
            }
          })
        }
      },
    },
    created() {
      //第一次显示全部资源的第一页
      this.axios.get('/sys/resource/myList',
      {
        params:{
          sourceTypeInt:'3',
          pageNo:'1',
          pageSize:'10'
      } 
      }).then((res) => {
        console.log(res)
        if(res.result==null){
          this.$message.error(res.message);
          this.hasMore=false
        }else{
        this.tempMap =res.result.content
        this.dataSource =this.dataSource.concat(this.tempMap)
        if((parseInt(res.result.totalPage) -parseInt(res.result.currentPage))>0){
            this.hasMore=true
          }else{
            this.hasMore=false
          }
        } 
      })  
    },
}
</script>

<style lang="less" scoped>
.addmore{
  margin-top: 20px;
  position: relative;
  margin-left: 45%;
  font-size: 12px;
  opacity:0.7;
}
.card-father{
  /deep/.ant-card-body {
    padding: 0px !important;
  }
  /deep/.ant-card-actions{
    border: 1px solid #e8e8e8;
  }
}

.my-mapcard {
  height: 340px;
  width: 290px;
  margin: 24px 16px;
}

.my-mapcard-img {
  width: 288px;
  height: 200px;
}

.my-card-body {
  height: 110px;
  margin-top: 10px;
  padding: 16px !important;
}

</style>